<style lang="less" scoped src="./financemanagement.less"></style>
<style lang="less" scoped src="../public.less"></style>
<script src="./financemanagement.js"></script>

<template>
    <div>
        <div>
            <Row class="query">
                <Col span="24">
                    收入/支出人： <Input v-model="queryData.payWho" style="width: 100px"></Input>
                    收入/支出名称：<Input v-model="queryData.name" style="width:  100px"></Input>
                    收入/支出类型：
                    <Select v-model="queryData.type" style="width: 100px">
                        <Option v-for="item in finaceList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                    收入/支出：
                    <Select v-model="queryData.payType" style="width: 100px">
                        <Option value="IN">收入</Option>
                        <Option value="OUT">支出</Option>
                    </Select>
                    收入/支出开始时间：
                    <DatePicker type="date"  style="width: 200px" v-model="queryData.startTime"></DatePicker>
                    收入/支出结束时间：
                    <DatePicker type="date"  style="width: 200px" v-model="queryData.endTime"></DatePicker>
                    <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
                    <span @click=""><Button type="primary" icon="refresh">清空</Button></span>
                </Col>
            </Row>

            <Row class="query">
                <Col span="24">
                    <span @click="showAdd"><Button type="primary" icon="plus">新增</Button></span>
                    <span @click="delBath"><Button type="error" icon="minus">批量删除</Button></span>
                </Col>
            </Row>
        </div>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList" :highlight-row="true" @on-selection-change="selectionChange"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal
                title="收入/支出详情"
                v-model="addOrEditVisible"
                width="500px"
                okText="保存"
                cancelText="关闭"
                :closable="true"
                :transfer="false"
                :mask-closable="false"
                @on-ok="doSave"
                :loading="false"
        >
            <Form :label-width="150" :model="formData">
                <FormItem label="收入/支出金额(元)">
                    <InputNumber v-model="formData.payAmt" style="width:200px"></InputNumber>
                </FormItem>
                <FormItem label="收入/支出名称">
                    <Input v-model="formData.name"   style="width:200px"></Input>
                </FormItem>
                <FormItem label="收入/支出人">
                    <Input v-model="formData.payWho" style="width: 200px"></Input>
                    <!--<DatePicker type="date" multiple  style="width: 300px" v-model="formData.classDates"></DatePicker>-->
                </FormItem>

                <FormItem label="收入/支出类型">
                    <Select v-model="formData.type" style="width: 200px">
                        <Option v-for="item in finaceList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </FormItem>

                <FormItem label="收入/支出">
                    <Select v-model="formData.payType" style="width: 200px">
                        <Option value="IN">收入</Option>
                        <Option value="OUT">支出</Option>
                    </Select>
                </FormItem>

                <FormItem label="收入/支出时间">
                    <DatePicker type="datetime"  style="width: 200px" v-model="formData.payTime"></DatePicker>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
